<template>
  <div id="up">
    <h2>灌装机</h2>
    <el-date-picker clearable v-model="yrTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择测试时间" style="margin-left: 20px">
    </el-date-picker>
    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" style="margin-left: 20px">搜索</el-button>
    <div class="proCharts" ref='echarts'></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import {
    yrzLine
  } from '@/api/system/zdsx.js'
  import axios from 'axios'
  export default {
    data() {
      return {
        loading: false,
        yrTime: '',
      }
    },
    mounted() {
      this.getOilList();
    },
    methods: {
      getOilList() {
        this.loading = true;
        yrzLine(this.yrTime).then(res => {
          const option = {
            xAxis: {
              data: res.data[1]
            },
            yAxis: {
              type: 'value'
            },
            legend: {
              data: ['电压', '电流']
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            series: [{
                name: '电压',
                data: res.data[0],
                type: 'line'
              },
              {
                name: '电流',
                data: res.data[2],
                type: 'line'
              }
            ]
          };
          const E = echarts.init(this.$refs.echarts)
          E.setOption(option)
        })

      },
      handleQuery() {
        this.getOilList();
        console.log(1111111)
      },
    },
  }
</script>

<style>
  .proCharts {
    width: 100%;
    height: 600px;
    /* margin-top: -300px; */
  }
  h2{
    font-size: 35px;
    text-align: center;
    color: #0072C6;
  }
</style>
